<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" @click="goBack()"></a>
			<h1 class="mui-title">在线咨询</h1>
		</header>
		<div class="mui-content">
			<div class="page-min-page">
				<div class="logo-box"></div>
				<div class="from-body padding-left-right-15 mui-input-group">
					<div class="mui-input-row">
						<input type="text" class="mui-input-clear" v-model="name" placeholder="您的姓名">
					</div>
					<div class="mui-input-row">
						<input type="tel" class="mui-input-clear" v-model="tel" placeholder="您的联系方式">
					</div>
					<div class="mui-input-row textarea">
						<textarea cols="6" placeholder="您要咨询的内容" v-model="mask" class="mui-input-row"></textarea>
					</div>
					
					<button type="button" class="app-btn mui-btn-hani-color" data-loading-text="请稍后" @click="submitCuslut">提交问题</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {api} from '../../../gloabl/api.js'
	export default{
		data:function(){
			return{
				name:'',
				tel:'',
				mask:''
			}
		},
		updated:function(){
			mui.init({
				swipeBack:true, //启用右滑关闭功能
			});
		},
		methods:{
			submitCuslut(){
				if(this.tel==''||this.mask == ''){
					mui.toast('请输入联系方式和咨询',2000);
					return;
				}
				let me = this;
				let query = api.sendConulstApi('"'+me.name+'"','"'+me.tel+'"','"'+me.mask+'"');
				mui.showLoading("正在提交..","div");//遮罩层
				me.$http.post(url.graphql,{query:query})
				.then((res)=>{
					mui.hideLoading();
					me.name='';
					me.tel='';
					me.mask='';
					mui.toast('您的反馈小鹿已收到',2000);
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			}
		}
	}
</script>